Skip to content

New diagram types: flowchart, mindmap & chart (+ card content and shapes)#12

Merged
phil-scott-78 merged 4 commits into
mainfrom
feat/chart-and-diagram-types
Jul 12, 2026
Merged

New diagram types: flowchart, mindmap & chart (+ card content and shapes)#12
phil-scott-78 merged 4 commits into
mainfrom
feat/chart-and-diagram-types

Conversation

@phil-scott-78

Copy link
Copy Markdown
Contributor

Bundles all work not yet in main — four commits that extend Beck's vocabulary with three new root type:s and the node/shape groundwork they stand on.

What's here

feat(nodes) — card content + new shapes (7e25278)

  • items: (bulleted list) and body: (wrapped paragraph) on cards, defaulted in the model and mirrored in the authoring NodeBuilder.
  • Diamond & parallelogram NodeShapes (artwork paths, sketch wobble, brutalist shadow) with rank-aware router anchoring (diamonds point-anchored to vertices; parallelogram anchors nudged onto the slanted face). Zero-nudge paths stay byte-identical.

feat — flowchart & mindmap types (4a16eb4)

  • flowchart — process/decision graphs (process cards, decision diamonds, I/O parallelograms, start/end terminators) joined by labelled links:, with "[*]" pseudo-steps.
  • mindmap — radial topic trees with items and body copy.
  • Both ship a model builder + fluent authoring builder and reuse the existing measure/route/svg/animate stages.

feat(playground) — flowchart examples + skill (4e1fc3e)

  • Flowchart group in the docs playground picker; first repo Claude skill (add-playground-example) documenting the three-file wiring.

feat(chart)type: chart data charts (10d863d)

  • Bar, line, pie, donut, and scatter charts on a dedicated ChartPainter that bypasses the node/edge layout+route+animate pipeline.
  • Series colours derive from --beck-primary via a chosen palette (analogous / monochromatic / complementary / sequential) as color-mix/relative-colour expressions, so charts re-tint with the host palette and flip light↔dark like every other diagram. A series may pin its own color:.
  • Legends (top/right/bottom/none, optional value annotations) and pie/donut centre labels. Non-finite data collapses to 0 so no bad coordinate reaches the SVG.
  • Full authoring builder + docs (chart guide, yaml reference, for-ai.llms.md), five wwwroot examples, and playground entry.

Invariants held

  • Colours stay --beck-* tokens / color-mix expressions — never resolved literals — so host-palette adoption and light↔dark both keep working.
  • Charts are static (no motion); the graph types reuse the compiled-animation pipeline unchanged.

Housekeeping

  • .gitignore: added *.snupkg, /dist/, and *.user.
  • Added oracle renders for the flowchart/mindmap types.

Testing

dotnet test tests/Beck.Tests/Beck.Tests.csproj533 passed, 0 failed.

🤖 Generated with Claude Code

Two self-contained additions to the node/card vocabulary, both emitted only
when present so every existing document stays byte-identical.

Card content blocks:
- `items:` (bulleted list) and `body:` (wrapped paragraph) on cards, defaulted
  in the model (Schema/Validate/ModelJson) and mirrored in the authoring
  NodeBuilder (Item/Items/Body).
- StyleGeometry gains ItemLine/ItemGap/BodyLine (optional-with-default, mirroring
  the class-compartment pitch); CardSizer measures the new blocks.

New node shapes (flowchart groundwork):
- Diamond & Parallelogram NodeShapes: Artwork polygon paths + sketch wobble +
  brutalist offset-polygon shadow; SvgRenderer emit with inscribed-box text wrap.
- Router support: diamonds are point-anchored to their vertices (never spread or
  straightened off); parallelogram left/right anchors nudge onto the slanted face
  by skew/2. Zero-nudge / non-diamond paths are byte-identical.

Tests: CardItemsBodySizingTests, DiamondParallelogramTests. Full suite green (434).
Add two new root `type:`s on the shared layered engine:

- `flowchart` — process/decision graphs (process cards, decision diamonds,
  I/O parallelograms, start/end terminators) joined by labelled `links:`,
  with `"[*]"` start/end pseudo-steps.
- `mindmap` — radial topic trees with items and body copy.

Both ship a model builder and a fluent authoring builder, and reuse the
existing measure/route/svg/animate stages. Shared engine work supports both:
diamond/parallelogram shapes and loop-back routing (EdgePainter,
OrthogonalRouter, SvgRenderer, CardSizer), plus token/schema/enum plumbing.

Includes guide + reference docs, playground examples for mindmap, corpus
diagrams, and model/SVG goldens; clean-line fuzzer coverage extended to the
new shapes. Full suite green (505 tests).
Add a Flowchart group to the docs playground's Examples picker:

- Two example diagrams — "Deploy gate" (TB, decisions + rollback loop) and
  "Ticket triage" (LR, routed by urgency) — under wwwroot/examples.
- Register the group in PlaygroundIsland's ExampleGroups (glyph, pill tag).
- Teal `data-type="flowchart"` pill colour (light + dark) in BrandStyling.

Also add the repo's first Claude skill, add-playground-example, documenting
the three-file process (author YAML, register in the picker, add the pill
colour) so future playground additions are mechanical.
Add a chart root `type:` that renders a small, static data chart on its own
painter, bypassing the node/edge layout+route+animate pipeline. Charts share
the meta/theming shell with every other diagram but carry no nodes, edges, or
flow.

- Model: ChartModel/ChartSeries/ChartPoint schema + ChartBuilder parser, wired
  through DiagramType.Chart, Tokens, Defaults, and Validate. Which series member
  carries data depends on kind (bar/pie/donut → one magnitude, line → a value
  list, scatter → x/y points).
- Svg: ChartPainter draws bar/line/pie/donut/scatter plus an optional legend
  (top/right/bottom/none, optional value annotations) and pie/donut centre
  labels; non-finite data collapses to 0 so no bad coordinate reaches the SVG.
  ChartColors derives every series colour from `--beck-primary` via the chosen
  palette (analogous/monochromatic/complementary/sequential) as
  color-mix/relative-colour expressions, so a chart re-tints with the host
  palette and flips light↔dark like the rest of Beck. A series may pin its own
  `color:`.
- Authoring: ChartDiagramBuilder fluent API + ChartKind/ChartPalette/
  LegendPlacement enums and their `Tokens.Of` mappings.
- Docs: chart guide, yaml reference, for-ai.llms.md; five wwwroot examples and
  four guide snippets; playground picker entry + pill colour.
- Tests: ChartTests and ChartQuality clean-line coverage. Full suite green
  (533 tests).

Also gitignore `*.snupkg` and `/dist/` local pack output, and add oracle
renders for the flowchart/mindmap types.
@phil-scott-78
phil-scott-78 merged commit b6c56ac into main Jul 12, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant